<template>
  <div :class="direction">
    <div
      v-for="item in dataSource"
      :key="item.value"
      :style="
        `margin:${direction === 'horizontal' ? '0 12px 0 0' : '0 0 12px 0'}`
      "
    >
      <d-radio
        :checked="!!(value && value === item.value)"
        @change="() => onClick(item.disabled, item.value)"
        :label="item.label"
        :disabled="disabled ? true : item.disabled"
      />
    </div>
  </div>
</template>

<script>
/**
 * @interface props
 *    @param disabled
 *    @param direction String 水平: horizontal | 垂直: ‘vertical‘ default:'horizontal'
 *    @param dataSource 数据 Array<{
 *    label:string,
 *    value:string | number,
 *    disabled:boolean
 * }>
 *    @param currentValue String radio是否禁用
 *
 * @method change
 *    change = (e:any)=>void // 触发回调 e 参数
 */
import DRadio from './DRadio.vue';

export default {
  name: 'DRadioGroup',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'horizontal'
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    value: {
      type: [String, Number, null],
      default: ''
    }
  },
  components: {
    DRadio
  },
  methods: {
    onClick(disabled, e) {
      if (!disabled) {
        this.$emit('change', e);
        this.$emit('update:value', e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.vertical {
  display: block;
}

.horizontal {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
</style>
